<template>
	<view class="door-open-final-page">
		<view class="top-box">
			<view class="name-row">
				<view class="left">
					<text class="name">{{orderInfo.hotelName}}</text>
					<text class="room">{{orderInfo.typeName}} {{orderInfo.room}}</text>
				</view>
				<view class="right">
					<navigator url="" class="more-info">
						查看详情 >
					</navigator>
				</view>
			</view>
			<view class="map-box"></view>
			<view class="time-box">
				<view class="time">
					<view class="month-day">{{dayObj && dayObj.startDay}}</view>
					<view class="week-time">{{dayObj && dayObj.startWeek}} {{dayObj && dayObj.startTime}}</view>
				</view>
				<view class="duration-box">共{{dayObj && dayObj.differDays}}天</view>
				<view class="time end-time">
					<view class="month-day">{{dayObj && dayObj.endDay}}</view>
					<view class="week-time">{{dayObj && dayObj.endWeek}} {{dayObj && dayObj.endTime}}</view>
				</view>
			</view>
			
			<view class="open-box">
				<view class="open-bg">
					<view class="open-btn">开锁</view>
				</view>
			</view>
		</view>
		<view class="add-box">
			<image class="add-icon" src="../../../static/images/fastServer/add_cohabitant.png"></image>
			<text class="add-text">添加同住人</text>
		</view>
		<view class="tips-box">
			<view class="tips-title">蓝牙开锁注意事项 </view>
			<view class="tips-item">1.请保持网络畅通</view>
			<view class="tips-item">2.请确保系统蓝牙开启</view>
			<view class="tips-item">3.请确保系统WIFI开启</view>
			<view class="tips-item">4."开锁中"持续时间长, 请唤醒门锁后再尝试小程序开锁</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				orderInfo: {
					hotelName: '如家酒店（万达店）',
					typeName: '大床房',
					room: '8-2-789',
					address: '北京市丰台区新村街道丰科路6号',
					startTime: '2023-05-22 12:00:00',
					endTime: '2023-05-23 12:00:00',
					users: []
				},
				dayObj: null

			}
		},
		created() {

			this.dayObj = {
				startDay: this.$moment(this.orderInfo.startTime).format('MM月DD日'),
				startWeek: '周' + this.numberTOChinese(this.$moment(this.orderInfo.startTime).weekday()),
				startTime: this.$moment(this.orderInfo.startTime).format('HH:MM'),
				endDay: this.$moment(this.orderInfo.endTime).format('MM月DD日'),
				endWeek: '周' + this.numberTOChinese(this.$moment(this.orderInfo.endTime).weekday()),
				endTime: this.$moment(this.orderInfo.endTime).format('HH:MM'),
				differDays: this.$moment(this.orderInfo.endTime).diff(this.$moment(this.orderInfo.startTime), 'days')
			}

			console.log('this.dayObj ==========', this.dayObj)
		},
		methods: {
			numberTOChinese(num) {
				const chineseNum = ['零', '一', '二', '三', '四', '五', '六', '日'];
				let str = num.toString();
				let result = '';

				for (let i = 0; i < str.length; i++) {
					let digit = Number(str[i]);
					let unit = ''

					if (digit === 0) {
						if (result[result.length - 1] !== '零') {
							result += '零';
						}
					} else {
						result += chineseNum[digit] + unit;
					}
				}

				return result;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.door-open-final-page {
		.top-box {
			background-color: #fff;
			border-radius: 16rpx;
			margin: 10rpx 30rpx;
			padding: 30rpx 0rpx;
			box-shadow: 0 0 1rpx 5rpx #f3f3f3;

			.name-row {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-start;
				padding: 0rpx 30rpx 30rpx 30rpx;

				.left {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;

					.name {
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
					}

					.room {
						font-size: 24rpx;
						color: #888888;
					}
				}

				.more-info {
					color: #0156F6;
					font-size: 28rpx;
				}
			}

			.map-box {
				height: 200rpx;
				border-radius: 16rpx;
				background-color: #f3f3f3;
				margin: 10rpx 30rpx 50rpx 30rpx;
			}

			.time-box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-start;
				margin: 10rpx 30rpx 50rpx 30rpx;

				.time {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;

					.month-day {
						font-size: 40rpx;
						font-weight: bold;
						margin-bottom: 12rpx;
					}

					.week-time {
						font-size: 28rpx;
						color: #888888;
					}
				}

				.end-time {
					align-items: flex-end;
				}

				.duration-box {
					padding: 8rpx 24rpx;
					border-radius: 50rpx;
					text-align: center;
					color: #888;
					border: 1rpx solid #888888;
					font-size: 28rpx;
				}
			}
			.open-box {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				padding: 30rpx 0rpx;
				.open-bg {
					width: 260rpx;
					height: 260rpx;
					border-radius: 200rpx;
					background-color:#91b6ff;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					.open-btn {
						width: 230rpx;
						height: 230rpx;
						line-height: 230rpx;
						text-align: center;
						font-size: 46rpx;
						color: #fff;
						letter-spacing: 12rpx;
						font-weight: bold;
						border-radius: 200rpx;
						background-color: #0156F6;
					}
				}
			}
		}

		.add-box {
			height: 180rpx;
			margin: 20rpx 30rpx;
			box-shadow: 0 0 1rpx 5rpx #f3f3f3;
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 40rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			.add-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			.add-text {
				color: #0156F6;
				font-size: 28rpx;
			}
		}

		.tips-box {
			margin: 10rpx 30rpx;
			color: #a6a6a6;

			.tips-title {
				font-size: 30rpx;
				margin-bottom: 30rpx;
			}

			.tips-item {
				font-size: 26rpx;
				margin-bottom: 16rpx;
			}
		}
	}
</style>